<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model='content'/>
		<button @click='add'>提交</button>
		<ul>
			<todo-item 
					v-for='(todolist,index) in todoList'
					v-bind:index = "index"
					v-bind:item = "todolist"
					@delete='handleDeleteClick'
			>				
			</todo-item>
		</ul>
	</div>
	<script>
		/*Vue.component('TodoItem',{
			props: ['item'],
			template:'<li>{{ item }}</li>'
		});*/
		var TodoItem = {
			props:['item','index'],
			template:"<li @click='handleClickItem'>{{item}}</li>",
			methods:{
				handleClickItem:function(){
					this.$emit('delete',this.index);
				}
			}
		}
		var app = new Vue({
			el:"#app",
			components:{
				TodoItem:TodoItem
			},
			data:{
				todoList:[],
				content:""
			},
			methods:{
				add:function(){
					this.todoList.push(this.content);
					this.content = '';
				},
				handleDeleteClick:function(index){
					this.todoList.splice(index,1);
				}
			}
		});
	</script>
</body>
</html>